<template>
  <div>
<!--
  showFilterBtn为筛选条件,
  showAddBtn为新增按钮，
  handleAdd为新增按钮执行方法
  $refs.queryPopupRef 为显示筛选条件
-->
    <basic-layout :title="title" :showAddBtn="true" @handleAdd="handleAdd" >
      <div class="body_box_main">
        <div class="body_box">
          <van-row class="listCon">
            <van-pull-refresh class="vanScroller" v-model="refreshing" @refresh="onRefresh">
              <van-list class="vanList" v-model="loading" :finished="finished"
                        ::finished-text="bookingList.length ? '没有更多了' : ''" @load="onLoad">
                <div v-for="(item, index) in bookingList" :style="{ padding: calcMargin(index), }">
                  <div class="mainStyle">
                    <div class="main_01">
                      <div class="main_01_top">
                        <div class="title">
                          <!--  姓名-->
                          <span>{{ item.rvHealthEmployee.name }}</span>
                        </div>
                        <div class="yystatusStyle" v-if="item.statusId == 1">
                          <!--  状态-->
                          {{ item.rvHealthStatus.name }}
                        </div>
                        <div class="noyystatusStyle" v-else>
                          <!--  状态-->
                          {{ item.rvHealthStatus.name }}
                        </div>

                      </div>
                      <div class="midStyle">
                        <div class="van-ellipsis">
                          <span>预约时间:</span>&nbsp;
<!--                          预约时间段-->
                          <span>{{ item.date }} {{ item.rvHealthPeriod.name }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>体检机构:</span>&nbsp;
                          <span>{{ item.rvHealthOrganizations.name }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>体检机构地址:</span>&nbsp;
                          <span>{{ item.rvHealthOrganizations.address }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>联系人:</span>&nbsp;
                          <span>{{ item.rvHealthOrganizations.contactName }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>联系方式:</span>&nbsp;
                          <span>{{ item.rvHealthOrganizations.contactPhone }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>体检套餐:</span>&nbsp;
                          <span>{{ item.rvHealthCombo.name }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>体检金额:</span>&nbsp;
                          <span>{{ item.price }}</span>
                        </div>
<!--                        <div class="van-ellipsis">-->
<!--                          <span>备注:</span>&nbsp;-->
<!--                          <span>{{ item.remark }}</span>-->
<!--                        </div>-->

                        <div class="van-ellipsis" v-if="item.statusId == 1">
                          <span>操作:</span>&nbsp;
                          <div class="finish-btn">
                            <van-button class="btn" size="small" color="#4eb3e9"
                                        @click.stop="handleUpdate(item)">更新</van-button>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <van-empty v-if="!loading && !bookingList.length" class="custom-image"
                         :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
            </van-pull-refresh>
          </van-row>
        </div>
      </div>
    </basic-layout>

    <!--        更新-->
    <van-popup v-model="showUpdate">
      <div class="sign-box update-box">

        <van-form class="filterBox">
          <label>预约时间</label>
          <van-field clearable v-model="updateDate.date" placeholder="请选择状态预约时间" @click="showData = true"/>
        </van-form>

        <van-form class="filterBox">
          <label>预约时间段</label>
          <van-field clickable
                     readonly
                     name="picker"
                     :value="updateDate.periodName"
                     placeholder="请选择预约时间段"
                     @click="showPeriod = true"/>
        </van-form>

        <van-form class="filterBox">
          <label>状态</label>
          <van-field clickable
                     readonly
                     name="picker"
                     :value="updateDate.statusName"
                     placeholder="请选择状态"
                     @click="showStatus = true"/>
        </van-form>

        <van-form class="filterBox">
          <label>备注</label>
          <van-field clearable v-model="updateDate.remark" placeholder="请输入备注" />
        </van-form>

        <div class="showUpdateWin-btn" style="display: flex;">
          <van-button size="small" class="btn" @click="cancel">取消</van-button>
          <van-button size="small" class="btn" color="#4eb3e9" @click="submit">提交</van-button>
        </div>
      </div>
    </van-popup>

    <!--      请选择预约时间-->
    <van-calendar :min-date="minDate" :max-date="maxDate" :allow-same-day="true" :show-confirm="false"
                  v-model="showData" @confirm="selectData" />

    <!--      请选择预约时间段-->
    <van-popup v-model="showPeriod" position="bottom">
      <van-picker title="请选择预约时间段"
                  show-toolbar
                  :columns="periodList"
                  @confirm="selectPeriod"
                  @cancel="showPeriod = false">
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.name }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <!--      请选择状态-->
    <van-popup v-model="showStatus" position="bottom">
      <van-picker title="请选择状态"
                  show-toolbar
                  :columns="statusList"
                  @confirm="selectStatus"
                  @cancel="showStatus = false">
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.name }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import {listBooking, updateBooking } from "@/api/realAssets/rvhealth/booking";
import {listStatus } from "@/api/realAssets/rvhealth/status";
import {listPeriod } from "@/api/realAssets/rvhealth/period";


export default {
  name: 'applyBooking',
  props: {},
  components: {},
  data() {
    return {
      //标题
      title: '体检预约管理',

      refreshing: false,
      loading: false,
      finished: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).userId, //申请人标识
      },
      // 体检预约表格数据
      bookingList: [],
      // 体检预约状态数据
      statusList: [],
      // 体检预约时间段数据
      periodList: [],

      //==============================更新====================================
      showUpdate: false,
      //更新数据
      updateDate: {
        id: null,
        userId: null,
        comboId: null,
        price: null,
        date: null,
        periodId: null,
        statusId: null,
        datetime: null,
        remark: null,
        statusName: null,
        periodName: null
      },

      //选择预约时间段
      showPeriod: false,
      //选择状态
      showStatus: false,
      //预约时间展示
      minDate: new Date(),
      maxDate: new Date(new Date().getFullYear() + 1, 11, 31),
      showData: false,

    }
  },

  created() {
    //查询表格数据
    this.getSearch();
    //查询体检预约状态数据
    this.getStatus();
    //查询体检预约时间段
    this.getPeriod();
  },
  computed: {},

  methods: {
    // 查询表格数据
    getSearch() {
      this.loading = true;
      this.finished = false;

      listBooking(this.queryParams).then(response => {
        if ( response.data.data ) {
          this.bookingList = [...this.bookingList, ...response.data.data.list];
          if (this.bookingList.length >= response.data.data.total) {
            this.finished = true;
          }
        }else{
          this.finished = true;
        }

        this.loading = false;
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },
    // 查询体检预约状态数据
    getStatus() {
      listStatus().then(response => {
        this.statusList = response.data.data;
      });
    },
    //查询体检预约时间段
    getPeriod(){
      listPeriod().then(response => {
        this.periodList = response.data.data;
      });
    },

    //下拉加载
    onLoad() {
      console.log("下拉加载")
      this.queryParams.pageNum++;
      //查询表格数据
      this.getSearch();
    },

    //刷新
    onRefresh() {
      this.refreshing = false;
      this.queryParams.pageNum = 1;
      this.bookingList = [];
      //查询表格数据
      this.getSearch();
    },

    //新增按钮：去预约
    handleAdd() {
      // 去体检机构管理界面
      this.$router.push("/health/applyOrganizations");
    },

    //更新
    handleUpdate(row) {
      //获得体检日期还有几天
      // console.log(row.date);
      // console.log(this.getDaysBetween(row.date))
      if (this.getDaysBetween(row.date) == 0){ //已过体检时间，不可修改
        this.$Notify({type: 'danger', message: '已过体检时间，不可修改！'});
        return false;
      }else if (this.getDaysBetween(row.date) < 7){ //体检前一周内状态不许修改
        this.$Notify({type: 'danger', message: '体检前一周内状态不许修改！'});
        return false;
      }

      //展示
      this.showUpdate = true;
      //更新数据保存
      this.updateDate= {
        id: row.id,
        userId: row.userId,
        comboId: row.comboId,
        price: row.price,
        date: row.date,
        periodId: row.periodId,
        statusId: row.statusId,
        datetime: row.datetime,
        remark: row.remark,
        statusName: row.rvHealthStatus.name,
        periodName: row.rvHealthPeriod.name
      };
    },
    //获得体检日期还有几天
    getDaysBetween(enDate){
      let sDate = new Date();
      let eDate = Date.parse(enDate);
      if (sDate > eDate) {
        return 0
      }
      // 这个判断可以根据需求来确定是否需要加上
      if (sDate === eDate) {
        return 1
      }
      const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
      return days;
    },
    //取消
    cancel(){
      this.showUpdate = false;
    },
    //提交
    submit(){

      updateBooking(this.updateDate).then(response => {
        this.$Notify({type: 'success', message: '更新成功！'});
        this.showUpdate = false;

        //刷新
        this.onRefresh();
      });

    },

    //选择预约时间
    selectData(item) {
      // console.log(item)
      // console.log(item.format("yyyy-MM-dd"))

      this.updateDate.date = item.format("yyyy-MM-dd");
      this.showData = false;

    },
    //选择预约时间段
    selectPeriod(option){
      this.updateDate.periodId = option.id;
      this.updateDate.periodName = option.name;
      this.showPeriod = false;
    },
    //选择状态
    selectStatus(option){
      this.updateDate.statusId = option.id;
      this.updateDate.statusName = option.name;
      this.showStatus = false;
    },

    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

  },
}
</script>
<style lang="less" scoped>
.update-box {
  width: 270px;
}
.sign-box {
  padding: 10px;
  box-sizing: border-box;
}
.showUpdateWin-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;

  .btn {
    margin: 0 5px;
  }
}

.finish-btn {
  position: absolute;
  right: 0;
  bottom: -8px;

  :last-child {
    color: #fff !important;
  }

  .btn {
    margin: 0 5px;
  }
}
.body_box_main {
  background-color: #f9f9f9;
  height: 100%;


  .body_box {
    background-color: #f9f9f9;
    height: 100%;

    .listCon {
      height: 100%;

      .vanScroller {
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 0px !important;
          height: 0px !important;
        }

        .vanList {

          .mainStyle {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            background: rgb(255, 255, 255);
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
            max-height: 300px;
            padding: 5px 10px 0px 10px;

            .main_01 {
              flex-direction: column;
              justify-content: space-around;
              width: 100%;

              .main_01_top {
                height: 40px;
                width: 100%;
                font-size: 16px;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                border-bottom: 1px solid #eee;

                .title {
                  display: flex;

                  .vanTagStyle {

                    .title_span {
                      color: #f69b52;
                      font-weight: 600;
                    }
                  }
                }

                .yystatusStyle {
                  color: #3CB371;
                  font-size: 13px;
                }

                .noyystatusStyle {
                  color: #808080;
                  font-size: 13px;
                }

              }

              .midStyle {
                max-height: 200px;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                position: relative;
                margin-bottom: 10px;

                .van-ellipsis {
                  color: #9e9e9f;
                  margin-top: 5px;
                  height: 24px;
                  line-height: 24px;

                  span:first-child {
                    font-size: 14px;
                  }

                  span:last-child {
                    font-size: 14px;
                    color: #504f4f;
                  }

                }
              }
            }
          }

        }
      }
    }
  }
}

/deep/ .van-tabs {
  height: 100%;
}

/deep/ .van-tabs__content {
  height: calc(100% - 44px);
}

/deep/ .van-tab__pane {
  height: 100%;
}


.midMain {
  //max-height: 120px;
  max-height: 120px;
  //min-height: 80px;
  //height: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  border-bottom: 1px solid #eee;

  .topContent {
    color: #9e9e9f;
    margin-top: 5px;
    height: 24px;
    line-height: 24px;

    span:first-child {
      font-size: 14px;
    }

    span:last-child {
      font-size: 14px;
      color: #504f4f;
    }
  }

  .buttonContent {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;

    .left {
      width: 80%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }

    .left_02 {
      width: 100%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }


    .btn {
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .van-button {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
        font-size: 13px;
      }
    }
  }

  //&:before {
  //  content: '';
  //  position: absolute;
  //  margin-top: 100px;
  //  width: 100%;
  //  height: 1px;
  //  background: #8080804a;
  //}

}

.flexBtn {
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  p {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  div:nth-of-type(1) {
    box-sizing: border-box;
    border-right: 1px solid #eee;
    color: #f25454;
  }
}
</style>
